<template>
    <div tabindex="0" @keydown.81="press">
        <gamemap></gamemap>
        <LeftSide class="left-side" v-show="left_side"></LeftSide>
    </div>
</template>

<script>
    import gamemap from "../components/importants/Map.vue"
    import LeftSide from "../components/Gaming/LeftSide.vue"

    import websocket from "../method/webSocket.js"

    export default {
        name: "GameRuntime",
        data(){
            return {
                left_side: true
            }
        },
        components: {
            gamemap,LeftSide
        },
        methods: {
            press(e) {
                this.left_side = ! this.left_side;
            },
            userExit(data) {
                this.$notify.warning(
                    "有用户离开"
                );
                this.$router.push("/room");
                setTimeout(() => {
                    this.$router.go(0)
                }, 2000)
            }
        },

        mounted() {
            if (websocket.bind_page.indexOf("gaming") < 0) {
                websocket.mapper_event["UserExit"] = this.userExit;
                websocket.bind_page.push("gaming")
            }

            if (websocket.webSocket === undefined) {
                this.$router.push("/room")
            }
        }
    }
</script>

<style scoped>
    .left-side{
        z-index: 1000;
        position: fixed;
        top: 80px;
        right: 19px ;
    }
</style>